<template>
     <div class="view-wrapper">
    <div class="index-list-wrapper custom">
      <cube-index-list :data="originSingerList">
        <cube-index-list-group
          v-for="(group, index) in originSingerList"
          :key="index"
          :group="group"
        >
          <cube-index-list-item v-for="(item, index) in group.list" :key="index" :item="item">
            <div class="custom-item" @click="getDetail(item)">
              <img class="avatar" v-lazy="item.src" />
              <span class="name">{{item.name}}</span>
            </div>
          </cube-index-list-item>
        </cube-index-list-group>
        <span class="custom-nav-item" slot="nav-item" slot-scope="props">{{props.item}}</span>
      </cube-index-list>
    </div>
    <router-view></router-view>
    <!-- <transition name="slide">
      <router-view></router-view>
    </transition> -->
  </div>
</template>

<script>
import {mapActions,mapGetters} from "vuex"
    export default {
         methods:{
             ...mapActions(["_getSingerList"]),
             getDetail(item){
                this.$router.push(`singer/${item.id}`)
                this.$store.commit("saveSinger",item)
             }
         },
         created(){
             this._getSingerList()
         },
         computed:{
             ...mapGetters(["originSingerList"])
         }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">

  .view-wrapper
    position: fixed
    top: 88px
    left: 0
    bottom: 0
    width: 100%
    .index-list-wrapper
      height: 98%
      width: 100%
      margin: 0 auto
      overflow: hidden
      &.custom
        .cube-index-list-content
          background-color: #222
          color: #909090
        .cube-index-list-group
          padding-bottom: 30px
        .cube-index-list-anchor
          background-color: #333
          height: 30px
          line-height: 30px
          padding: 0 0 0 20px
        .custom-item
          display: flex
          align-items: center
          padding: 20px 0 0 30px
          .avatar
            width: 50px
            height: 50px
            border-radius: 50%
          .name
            margin-left: 20px
            color: $color-text-l
            font-size: $font-size-medium
        .cube-index-list-nav
          padding: 20px 0
          border-radius: 10px
          background: rgba(0,0,0,.3)
          >ul
            >li
              padding: 3px
              &.active
                .custom-nav-item
                  color: #ffcd32
        .custom-nav-item
          font-size: 12px
          color: #909090

/* 路由动画 */
// .slide-enter-active, .slide-leave-active
//         transition all 0.3s

// .slide-enter, .slide-leave-to
//         transform translateX(100%)
</style>
